<template>
  <div class="thermal-analysis-main">
    <div class="main-content">
      <div class="main-content-weeks" v-for="(item, i) in weeks" :key="i">{{ item }}</div>
      <div class="main-content-weeks" v-for="(item, i) in 35" :key="i">
        <div
          class="main-content-weeks-item"
          v-if="i >= startDayOfWeek && i <= startDayOfWeek + monthNumber - 1"
          :style="getBackColor(i - startDayOfWeek)"
        ></div>
      </div>
    </div>
    <div class="main-mark">
      <div class="main-mark-item" v-for="(item, i) in colorList" :key="i">
        <div class="item-color" :style="{ background: item }"></div>
        <div class="item-name">{{ markList[i] }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="System">
import { reactive, computed } from "vue";
const props = defineProps({
  data: {
    type: Array<number>,
    required: false,
    default: () => []
  },
  date: {
    type: String,
    required: false,
    default: "2024-11"
  }
});
const weeks = reactive(["日", "一", "二", "三", "四", "五", "六"]);
const colorList = reactive(["#DFE5E6FF", "#AEEEF0FF", "#7EE3E7FF", "#5DDCE0FF", "#5ECCD1FF", "#FFDABEFF"]);
const markList = reactive(["≤75", "75-150", "150-225", "225-300", "300-375", "≥375"]);
const year = computed(() => Number(props.date.split("-")[0]));
const month = computed(() => Number(props.date.split("-")[1]));
const startDayOfWeek = computed(() => {
  const startDay = new Date(year.value, month.value - 1, 1);
  return startDay.getDay();
});
const monthNumber = computed(() => {
  const endDay = new Date(year.value, month.value, 0);
  return endDay.getDate();
});
console.log(props.data);

const getBackColor = i => {
  let color = colorList[0];
  const num = props.data[i] || 0;
  if (num > 75 && num <= 150) color = colorList[1];
  if (num > 150 && num <= 225) color = colorList[2];
  if (num > 225 && num <= 300) color = colorList[3];
  if (num > 300 && num < 375) color = colorList[4];
  if (num >= 375) color = colorList[5];
  return {
    background: color
  };
};
</script>

<style scoped lang="scss">
.thermal-analysis-main {
  display: grid;
  grid-template-columns: 1fr 100px;
  column-gap: 40px;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: var(--el-text-color-primary);
  .main-content {
    display: grid;
    grid-template-rows: repeat(6, 24px);
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    align-content: center;
    height: 100%;
    .main-content-weeks {
      text-align: center;
      .main-content-weeks-item {
        width: 100%;
        height: 100%;
      }
    }
  }
  .main-mark {
    display: grid;
    grid-template-rows: repeat(6, 26px);
    align-content: center;
    width: 100%;
    height: 100%;
    .main-mark-item {
      display: grid;
      grid-template-columns: 16px 1fr;
      column-gap: 16px;
      align-items: center;
      .item-color {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
